<div id="{$control_id}_upload_box" class="wu-example">
    <!--用来存放文件信息-->
    <div id="{$control_id}_upload_list" class="uploader-list">
        <?php
            if ($value) {
                if (is_array($value)) {
                    $files = $value;
                } else {
                    $files = explode(',', $value);
                }
            } else {
                $files = [];
            }
        ?>
            
        <ul class="list-group file-box <?php if (!$value) echo 'hidden' ?>">
            {foreach name="files" item="file"}
                <li class="list-group-item file-item" data-id="{$file}">
                    <?php if ($upload_type == 'image'): ?>
                        <img src="{$file|get_cover}" data-id="{$file}" style="max-width: 100%;" />
                        <i class="fa fa-times-circle pull-right remove-file"></i>
                    <?php else: ?>
                        <i class="fa fa-file"></i>
                        <span><?php echo model('admin/upload')->getUploadInfo($file, 'name'); ?></span>
                        <i class="fa fa-times-circle pull-right remove-file"></i>
                    <?php endif; ?>
                </li>
            {/foreach}
        </ul>
    </div>
    <div class="btns">
        <input type="hidden" id="{$control_id}_upload_input" name="{$name}" value="{$value}" />
        <div id="{$control_id}_upload" class="btn btn-primary-outline btn-pill">{$button_text}</div>
        <button id="ctlBtn" class="btn btn-default hidden">开始上传</button>
    </div>
</div>

<script type="text/javascript">
    $(function(){
        var uploader_{$control_id}_upload = WebUploader.create({
            withCredentials: true,                                                            // 跨域请求提供凭证
            auto: true,                                                                       // 选完文件后，是否自动上传
            duplicate: true,                                                                  // 同一文件是否可以重复上传
            server: '{:url("/admin/upload/upload", array("dir" => "$upload_type", "module_name" => request()->module()), true, true)}', // 文件接收服务端
            pick: '#{$control_id}_upload',                                      // 选择文件的按钮
            resize: false,                                                                    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            //fileNumLimit: <?php echo $allow_multi ? 20 : 1; ?>,                                                                 // 验证文件总数量, 超出则不允许加入队列
            fileSingleSizeLimit: {$max_size} * 1024 * 1024, // 验证单个文件大小是否超出限制, 超出则不允许加入队列
            // 文件过滤
            accept: {
                title: 'Files',
                extensions: "{$file_exts}"
            }
        });

        // 当有文件添加进来的时候
        uploader_{$control_id}_upload.on('fileQueued', function(file) {
            <?php if (!$allow_multi): ?>
            $('#{$control_id}_upload_list ul.list-group').empty();
            $('#{$control_id}_upload_input').val('');
            <?php endif; ?>
            
            var $li = $(
                '<li id="' + file.id + '" class="list-group-item file-item">' +
                    '<i class="fa fa-file"></i>' +
                    '<span>' + file.name + '</span>' +
                    '<i class="fa fa-times-circle pull-right remove-file"></i>' +
                '</li>'
                );
            
            // $list为容器jQuery实例
            $('#{$control_id}_upload_list ul.list-group').removeClass('hidden').append($li);
        });

        // 文件上传过程中创建进度条实时显示。
        uploader_{$control_id}_upload.on('uploadProgress', function(file, percentage) {
            var $li = $( '#'+file.id),
                $percent = $li.find('.progress .progress-bar');
            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress"><div class="progress-bar"></div></div>')
                        .appendTo( $li )
                        .find('.progress-bar');
            }
            $percent.css( 'width', percentage * 100 + '%');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader_{$control_id}_upload.on('uploadComplete', function(file) {
            $('#'+file.id ).find('.progress').remove();
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader_{$control_id}_upload.on('uploadSuccess', function(file , response) {
            $('#'+file.id ).addClass('upload-state-done');
            if (response.status == 1) {
                $('#'+file.id).attr('data-id', response.id);
                var input = $('#{$control_id}_upload_input');
                if (input.val()) {
                    input.val(input.val() + ',' + response.id);
                } else {
                    input.val(response.id);
                }
                
                <?php if ($upload_type == 'image'): ?>
                    $('#'+file.id).empty().append(
                        '<img src="' + response.url + '" style="max-width: 100%;" />' +
                        '<i class="fa fa-times-circle pull-right remove-file"></i>'
                    );
                <?php endif; ?>
            } else {
            	toastr.warning('错误：' + response.message);
                $('#'+file.id).remove();
            }
        });

        // 上传错误
        uploader_{$control_id}_upload.on("error",function (type){
            if (type=="Q_TYPE_DENIED") {
            	toastr.warning('该文件格式不支持');
            } else if(type=="F_EXCEED_SIZE") {
            	toastr.warning("文件大小不允许超过{$max_size}MB");
            } else if(type=="Q_EXCEED_NUM_LIMIT") {
            	toastr.warning("超过允许的文件数量");
            } else {
            	toastr.warning(type);
            }
        });

        // 文件上传失败，显示上传出错。
        uploader_{$control_id}_upload.on('uploadError', function(file) {
        	toastr.warning('上传接口出错');
            var $li = $('#'+file.id),
                $error = $li.find('div.error');
            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo($li);
            }
            $error.text('上传失败');
        });

        // 删除文件
        $(document).on('click', '#{$control_id}_upload_list .remove-file', function() {
            var ready_for_remove_id = $(this).closest('.file-item').attr('data-id'); //获取待删除的文件ID
            if (!ready_for_remove_id) {
            	toastr.warning('错误', 'danger');
            }
            var current_file_ids = $('#{$control_id}_upload_input').val().split(","); //获取当前文件列表以逗号分隔的ID并转换成数组
            current_file_ids.ly_delete(ready_for_remove_id); //从数组中删除待删除的文件ID
            $('#{$control_id}_upload_input').val(current_file_ids.join(',')) //删除后覆盖原input的值
            $(this).closest('.file-item').remove(); //删除文件预览
            if ($('#{$control_id}_upload_list ul.list-group li').length == 0) { 
                $('#{$control_id}_upload_list ul.list-group').addClass('hidden');
            }
        });
    });
</script>
